<template>
  <view class="container">
    <!-- 顶部状态筛选 -->
    <view class="filter-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab }}
      </view>
      <view class="filter-btn">
        <uni-icons type="filter" size="20" color="#666"></uni-icons>
        <text>筛选</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <scroll-view class="goods-list" scroll-y>
      <!-- 厂商信息 -->
      <view class="vendor-info">
        <text class="vendor-name">我是厂商名称A</text>
        <view class="stats-row">
          <text>总采购数：2123件</text>
          <text>已入库数：136件</text>
        </view>
      </view>

      <!-- 商品卡片 -->
      <view class="goods-card" v-for="(item, index) in goods" :key="index">
        <view class="goods-basic">
          <text>款号：{{ item.styleNumber }}</text>
          <text>颜色：{{ item.color }}</text>
        </view>
        <view class="goods-basic">
          <text>尺码：{{ item.size }}</text>
          <view class="quantity-control">
            <text>入库数量</text>
            <view class="quantity-input">
              <text class="btn" @click="changeQuantity(index, -1)">-</text>
              <text class="number">{{ item.quantity }}</text>
              <text class="btn" @click="changeQuantity(index, 1)">+</text>
            </view>
          </view>
        </view>

        <view class="price-info">
          <view class="price-row">
            <text>真实进价：</text>
            <text class="price">¥{{ item.realPrice }}</text>
          </view>
          <view class="price-row">
            <text>采购数：</text>
            <text>{{ item.purchaseQuantity }}件</text>
          </view>
          <view class="price-row">
            <text>入库数：</text>
            <text>{{ item.stockInQuantity }}件</text>
          </view>
          <view class="price-row">
            <text>入库价格：</text>
            <text class="price">¥{{ item.stockInPrice }}</text>
          </view>
          <view class="price-row" v-if="activeTab === 1">
            <text>入库时间：</text>
            <text>{{ item.stockInTime }}</text>
          </view>
        </view>

        <view class="action-btns" v-if="activeTab === 0">
          <button class="btn cancel" @click="cancelItem(index)">取消</button>
          <button class="btn confirm" @click="confirmItem(index)">确定</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref(0)
const tabs = ['未入库', '已入库', '已取消', '筛选']

const goods = ref([
  {
    styleNumber: '212313',
    color: '黑色',
    size: 'XL',
    quantity: 12356,
    realPrice: '1234.34',
    purchaseQuantity: 21,
    stockInQuantity: 20,
    stockInPrice: '121.45',
    stockInTime: '2025-03-13 15:53:52'
  },
  {
    styleNumber: '212313',
    color: '黑色',
    size: '均码',
    quantity: 12356,
    realPrice: '1234.34',
    purchaseQuantity: 21,
    stockInQuantity: 20,
    stockInPrice: '121.45',
    stockInTime: '2025-03-13 15:53:52'
  }
])

const changeQuantity = (index, val) => {
  const newVal = goods.value[index].quantity + val
  if (newVal >= 0) {
    goods.value[index].quantity = newVal
  }
}

const cancelItem = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消入库该商品吗？',
    success: (res) => {
      if (res.confirm) {
        goods.value.splice(index, 1)
        uni.showToast({ title: '已取消', icon: 'success' })
      }
    }
  })
}

const confirmItem = (index) => {
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '入库成功', icon: 'success' })
    // 实际项目中这里调用API
  }, 1000)
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  height: 100vh;
  box-sizing: border-box;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(62, 109, 255, 0.1);
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 0;
  position: relative;
}

.tab-item.active {
  color: #3E6DFF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #3E6DFF;
  border-radius: 2rpx;
}

.filter-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}

/* 商品列表 */
.goods-list {
  height: calc(100vh - 120rpx);
}

.vendor-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.vendor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
}

.goods-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.goods-basic {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-input {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.quantity-input .btn {
  width: 60rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #f5f5f5;
  font-size: 32rpx;
}

.quantity-input .number {
  width: 80rpx;
  text-align: center;
  font-size: 28rpx;
}

.price-info {
  border-top: 1rpx dashed #eee;
  padding-top: 20rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.price-row .price {
  color: #FF4D4F;
  font-weight: bold;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-btns .btn {
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 26rpx;
  margin-left: 20rpx;
  border-radius: 30rpx;
}

.action-btns .cancel {
  background-color: #f5f5f5;
  color: #666;
  border: 1rpx solid #ddd;
}

.action-btns .confirm {
  background-color: #3E6DFF;
  color: #fff;
  border: 1rpx solid #3E6DFF;
}
</style>